<template>
  <view class="homeBox">
    <view class="home-box">
      <!-- 商品列表 -->
      <view class="shop-list">
        <view
          v-for="(item, index) in shopList"
          :key="index"
          class="shop-item"
        >
          <!-- 商品图片 -->
          <image
            :src="item.image"
            mode="aspectFill"
            class="shop-image"
          ></image>
          <!-- 商品信息 -->
          <view class="shop-info">
            <!-- 标题 -->
            <view class="shop-title">{{ item.title }}
              <view class="shop-title-name">歌手</view>
            </view>
            <!-- 时间 -->
            <view class="shop-time">近期1场演出/1223.7万粉丝</view>
          </view>
        </view>
      </view>
    </view>
    <addressBox
      ref="addressBox"
      @addrFun="addrFun"
    />
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import addressBox from '@/components/cityPicker/addressBox.vue'
import uniPicker from '@/components/uni_picker/uni_picker.vue'
export default {
  name: 'uni_home',
  components: {
    addressBox,
    uniPicker,
  },
  data() {
    return {
      imgUrl: this.$apiFun.imgUrl,
      host: this.$apiFun.host,
      NewsList: [], //输入框轮播文案
      // 输入框轮播
      indicatorDots1: false,
      autoplay1: true,
      vertical1: true,
      interval1: 5000,
      duration1: 1000,
      circular1: true,
      shopList: [
        {
          image:
            'https://qcloud.dpfile.com/pc/_22NoSoft3aE6EJvPPVKZl7azJnSbjQvlobQc1TprekID0bsu-SAtCe9N8iBmkY3.jpg',
          title: '五月天1',
          time: '2023-10-01 14:00',
          location: '北京',
          price: '99.99',
        },
        {
          image:
            'https://qcloud.dpfile.com/pc/kDGPxk7sSy-IMWjRxmVIHmd0uS8A9nsAJlUIyucibgyztIovP0BrKDTdf2ycVz5i.jpg',
          title: '郑润泽2',
          time: '2023-10-02 15:00',
          location: '上海',
          price: '89.99',
        },
        {
          image:
            'https://qcloud.dpfile.com/pc/_22NoSoft3aE6EJvPPVKZl7azJnSbjQvlobQc1TprekID0bsu-SAtCe9N8iBmkY3.jpg',
          title: '五月天3',
          time: '2023-10-03 16:00',
          location: '广州',
          price: '79.99',
        },
        {
          image:
            'https://qcloud.dpfile.com/pc/kDGPxk7sSy-IMWjRxmVIHmd0uS8A9nsAJlUIyucibgyztIovP0BrKDTdf2ycVz5i.jpg',
          title: '郑润泽4',
          time: '2023-10-04 17:00',
          location: '深圳',
          price: '69.99',
        },
        {
          image:
            'https://qcloud.dpfile.com/pc/kDGPxk7sSy-IMWjRxmVIHmd0uS8A9nsAJlUIyucibgyztIovP0BrKDTdf2ycVz5i.jpg',
          title: '五月天',
          time: '2023-10-04 17:00',
          location: '深圳',
          price: '69.99',
        },
        {
          image:
            'https://qcloud.dpfile.com/pc/kDGPxk7sSy-IMWjRxmVIHmd0uS8A9nsAJlUIyucibgyztIovP0BrKDTdf2ycVz5i.jpg',
          title: '郑润泽',
          time: '2023-10-04 17:00',
          location: '深圳',
          price: '69.99',
        },
      ],
      paramObj: {
        addr: '',
      },
    }
  },
  watch: {},
  computed: {
    //login_status 0 未登录 、1临时微信登录 2已登录
    ...mapGetters(['login_status']),
  },
  async onLoad(option) {
    this.init()
  },
  mounted() {},
  methods: {
    setPicker() {},
    async init() {
      let res = await this.$apiFun.getApi(this.$api.menuListApi)
      console.log('res', res)
    },
    openAddr() {
      this.$refs['addressBox'].open()
    },
    addrFun(val) {
      console.log('val---------', val)
    },
  },
  onReachBottom() {
    console.log(1111111111111)
  },
  onPullDownRefresh() {},
}
</script>
<style>
page {
  height: 100%;
  background: #000000;
  color: white;
}
</style>
<style scoped lang="less">
page {
  width: 100%;
  height: 100%;
  color: #6c6c6c;

  .homeBox {
    width: 100%;
    height: 100%;
  }

  .home-box {
    padding: 0 15rpx;
    box-sizing: border-box;
  }
  /* 商品列表 */
  .shop-list {
    margin-top: 15rpx;
    display: flex;
    flex-direction: column;
    /* 竖向排列 */
  }

  /* 单个商品项 */
  .shop-item {
    display: flex;
    align-items: center;
    padding: 0 15rpx;
    box-sizing: border-box;
    // background-color: rgba(255, 255, 255, 0.1);
    height: 190rpx;
  }

  /* 商品图片 */
  .shop-image {
    border-radius: 50%;
    width: 125rpx;
    height: 125rpx;
  }

  /* 商品信息 */
  .shop-info {
    flex: 1;
    padding: 20rpx; /* 商品标题 */
    .shop-title {
      display: block;
      font-size: 32rpx;
      color: rgba(255, 255, 255, 1);
      margin-bottom: 35rpx;
      display: flex;
      align-items: center;
      .shop-title-name {
        width: 70rpx;
        height: 35rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #bbbbbb;
        font-size: 22rpx;
        color: white;
        border-radius: 6rpx 6rpx 17rpx 6rpx;
        margin-left: 5rpx;
      }
    }
  }

  .shop-time {
    display: block;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 5rpx;
  }
}
</style>